<template>
	<!--引导页 -->
	<view class="main">
    <!-- 状态栏 -->
    <view class="status_bar bar"></view>
    
    <view class="content flex flex-ai-c">
      <!-- <view class="text" style="font-size: 80rpx; color: red;" @click="setGuideStatus()">打开</view> -->
      <swiper class="swiper" :autoplay="false" :duration="300" :indicator-dots="true" indicator-active-color="#fcd221">
        <template v-for="(item,index) in guideImgs">
          <swiper-item :key="index">
            <view class="swiper-item">
              <image :src="item" mode="widthFix" class="img"></image>
              <button v-if="index === guideImgs.length -1" class="btn-next" :plain="true" size="mini" @click="setGuideStatus()">
                <text>立即体验</text>
              </button>
            </view>
          </swiper-item>
        </template>
      </swiper>
    </view>
	</view>
</template>


<script>
  import img1 from '@/static/img/guideImg/guide1.js'
  import img2 from '@/static/img/guideImg/guide2.js'
  
  export default {
    data() {
      return {
        guideFlag: false,
        guideImgs: [], // 引导页图片
        // 设备屏幕信息
        screenInfo: {
          screenWidth: 0,
          screenHeight: 0,
          statusBarHeight: 0,
        },
        // guideImgs: [{
        //   "id": "1",
        //   "imgurl": "https://files.yzsheng.com/bussiness/imgs/guide/guide1(1080-1920).png"
        // }, {
        //   "id": "2",
        //   "imgurl": "https://files.yzsheng.com/bussiness/imgs/guide/guide2(1080-1920).png"
        // }, {
        //   "id": "3",
        //   "imgurl": "https://files.yzsheng.com/bussiness/imgs/guide/guide3(1080-1920).png"
        // }]
      }
    },
    computed: {
      statusBar() {
        let mainHeight = this.screenInfo.screenHeight - this.screenInfo.statusBarHeight
        return mainHeight * 2 + 'rpx'
      }
    },
    
    onLoad() {
      this.init()
      // this.getSystemInfo()
    },
    created() {
      // this.getGuideImgs() // 获取
    },
    methods: {
      init() {
        // 没有启动标志
        if (!uni.getStorageSync('needGuideFlag')) {
          this.guideImgs = [
            img1, img2
          ]
        } else {
          // 从本地储存上获取用户信息
          let userInfo = uni.getStorageSync('Ztc_B_USER_INFO')
          let token = uni.getStorageSync('token')
          
          // 是否有token和权限
          if (!token) {
            uni.reLaunch({
              url: '/pages_login/login/login',
            })
            return false
          }
          
          // 如果有用户信息数据，将用户信息存到vuex
          if (userInfo.permious) {
            if (uni.getStorageSync('userInfoDetail')) {
              let userInfoDetail = uni.getStorageSync('userInfoDetail')
              this.$store.commit('setUserInfoDetail', userInfoDetail)
            }
            
            uni.reLaunch({
              url: '/pages/index/index',
            })
          } else {
            uni.reLaunch({
              url: '/pages_login/login/login',
            })
          }
        }
      },
      // 获取屏幕，状态栏信息
      getSystemInfo() {
        const { screenWidth, screenHeight, statusBarHeight } = uni.getSystemInfoSync()
        this.screenInfo = { screenWidth, screenHeight, statusBarHeight }
      },
      //获取引导页图片
      async getGuideImgs() {
        try {
          const res = await this.$api.jsonData.getGuideImg()
          console.log('启动图', res)
          this.guideImgs = res.data.bussiness
        } catch (err) {
          console.log('启动图错误', err)
          // if (!uni.getStorageSync('Ztc_B_USER_INFO').token) {
          //   uni.reLaunch({
          //     url: "/pages_login/login/login",
          //   })
          // } else {
          //   uni.reLaunch({
          //     url: "/pages/index/index",
          //   })
          // }
        }
      },
      
      // 设置引导页启动标识
      setGuideStatus() {
        uni.setStorageSync('needGuideFlag', true)
        uni.reLaunch({
        	url: "/pages_login/login/login",
        })
      },
      
      // 获取是否需要启动引导页
      getGuideStatus() {
        this.guideFlag = uni.getStorageSync('needGuideFlag')
      }
    }
  }
</script>

<style lang="scss" scoped>
  $c-active: #fff;
  
  .bar {
    background: rbga(0,0,0,0);
  }
  
	.main {
    width: 100%;
		height: calc(100vh - var(--status-bar-height));
    
    .content {
      width: 100%;
      height: 100%;
    }
  }
  
  .swiper {
    width: 100%;
    height: 100%;
    
    .swiper-item {
      width: 100%;
      height: 100%;
      position: relative;
			background: #ffb55c;
      
      .img {
        width: 100%;
      }
    }
  }
  
  .btn-next {
    position: absolute;
    padding: 0 20rpx;
    margin: auto;
    left: 50%;
    top: 85vh;
    // bottom: 15vh;
    transform: translateX(-50%);
    z-index: 999;
    border-color: $c-active;
    border-radius: 40rpx;
    
    &.button-hover {
      opacity: 0.6;
    }
    
    text {
      font-size: 24rpx;
      color: $c-active;
    }
  }
	
		
	.status_bar {
		background: #ffd63e;
	}
	
</style>
